<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> 
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>用户注册</title>
	<link rel="stylesheet" href="../style/base.css" type="text/css">
	<link rel="stylesheet" href="../style/global.css" type="text/css">
	<link rel="stylesheet" href="../style/header.css" type="text/css">
	<link rel="stylesheet" href="../style/login.css" type="text/css">
	<link rel="stylesheet" href="../style/footer.css" type="text/css">
</head>
<body>
	<!-- 顶部导航 start -->
	<div class="topnav">
		<div class="topnav_bd w990 bc">
			<div class="topnav_left">
				
			</div>
			<div class="topnav_right fr">
				<ul>
					<li>您好，欢迎来到京西！[<a href="login.html">登录</a>] [<a href="regist.html">免费注册</a>] </li>
					<li class="line">|</li>
					<li>我的订单</li>
					<li class="line">|</li>
					<li>客户服务</li>

				</ul>
			</div>
		</div>
	</div>
	<!-- 顶部导航 end -->
	
	<div style="clear:both;"></div>

	<!-- 页面头部 start -->
	<div class="header w990 bc mt15">
		<div class="logo w990">
			<h2 class="fl"><a href="index.html"><img src="../images/logo.png" alt="京西商城"></a></h2>
		</div>
	</div>
	<!-- 页面头部 end -->
	
	<!-- 登录主体部分start -->
	<div class="login w990 bc mt10 regist">
		<div class="login_hd">
			<h2>手机快速注册</h2>
			<b></b>
		</div>
		<div class="login_bd">
			<style>
				.regist .login_form {
					width:100%;height:300px;
					display: flex;justify-content: center;align-items: center;
					flex-direction: column;
				}
				input{
					width: 290px;/*设置按钮宽度*/
					height: 30px;/*设置按钮高度*/
					border: 1px solid #ccc;
					padding: 7px 0px;
					padding-left:5px;
					border-radius: 3px;
					-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
					box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
					-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
					-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
					transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
				}
				input:focus{
						border-color: #66afe9;
						outline: 0;
						-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
						box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
				}
				button{
					width: 290px;/*设置按钮宽度*/
					height: 30px;/*设置按钮高度*/
					color:white;/*字体颜色*/
					background-color:cornflowerblue;/*按钮背景颜色*/
					border-radius: 3px;/*让按钮变得圆滑一点*/
					border-width: 0;/*消去按钮丑的边框*/
					margin: 0;
					outline: none;/*取消轮廓*/
					font-family: KaiTi;/*字体设置为楷体*/
					font-size: 17px;/*设置字体大小*/
					text-align: center;/*字体居中*/
					font-weight: bold;
					cursor: pointer;/*设置鼠标箭头手势*/
				}
				button:hover{/*鼠标移动时的颜色变化*/
					background-color: black;}

				.captcha {position: relative;}
				.captchaBtn {position: absolute;right:0px; top: 9px;width: 118px;}
			</style>
			<div class="login_form fl">
				<input type="text" autocomplete="off" name="mobile" placeholder="请输入手机号"> <br />
				
				<div id="captcha">
					<div id="text">
						行为验证™ 安全组件加载中
					</div>
					<div id="wait" class="show">
						<div class="loading">
							<div class="loading-dot"></div>
							<div class="loading-dot"></div>
							<div class="loading-dot"></div>
							<div class="loading-dot"></div>
						</div>
					</div>
				</div>  <br />

				
				<div class="captcha">
					<input type="number" min="4" max="4"  autocomplete="off" name="captcha" placeholder="请输入短信验证码"> 
					<button class="captchaBtn">获取验证码</button>
				</div>
				<br />
				<input type="text" autocomplete="off" name="pwd" placeholder="请输入登录密码"> <br />

				<button class="createBtn">提交创建</button>
			</div>
		</div>
	</div>
	<!-- 登录主体部分end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt15">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">京西论坛</a>
		</p>
		<p class="copyright">
			 © 2005-2013 京东网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号 
		</p>
		<p class="auth">
			<a href=""><img src="../images/xin.png" alt="" /></a>
			<a href=""><img src="../images/kexin.jpg" alt="" /></a>
			<a href=""><img src="../images/police.jpg" alt="" /></a>
			<a href=""><img src="../images/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->

</body>
</html>


	
<script src="../js/jquery.js"></script>
<script src="../js/gt.js"></script>
<script>
	let num = 60
	let t

	var handler = function (captchaObj) {
		captchaObj.appendTo('#captcha');
		captchaObj.onReady(function () {
			$("#wait").hide();
		});

		// 获取验证码
		$('.captchaBtn').click(function() {
			// 验证
			let mobile = $('input[name=mobile]').val()
			if (!/^1\d{10}$/.test(mobile)) return alert('手机号有误')
			var result = captchaObj.getValidate();
			if (!result) return alert('请完成验证');
			// 倒计时效果
			t = setInterval(function() {
				num--
				if (num == 0) {
					clearInterval(t)
					num = 60
					$('.captchaBtn').text(`获取验证码`)
					$('.captchaBtn').removeAttr('disabled')
					$('.captchaBtn').css({cursor:'pointer', width: '118px'})
				} else {
					$('.captchaBtn').text(`重发验证码（${num}）`)
					$('.captchaBtn').attr('disabled', 'disabled')
					$('.captchaBtn').css({cursor:'default', width: '152px'})
				}
			}, 1000)
			// 发送接口请求
			$.post('/api/v1/public/sendMsg.jsp', {mobile}, res=>{
				// console.log(res)
				if (res.meta.state != 201)
				{
					alert(res.meta.msg)
				}  
			}, 'json')
		})

		// 提交创建
		$('.login_form button.createBtn').click(function () {
			// 验证
			let mobile = $('input[name=mobile]').val()
			if (!/^1\d{10}$/.test(mobile)) return alert('手机号有误')
			var result = captchaObj.getValidate();
			if (!result) return alert('请完成验证');
			let pwd = $('input[name=pwd]').val()
			let code = $('input[name=captcha]').val()
			if (!/^\d{4}$/.test(code)) return alert('验证码有误')
			
			// 验证通过发送异步请求 
			$.post('/api/v1/public/reg2.jsp', {mobile,pwd,code}, res=>{
				// console.log(res)
				if (res.meta.state == 201)
				{
					alert('注册成功，请登录...')
					location.href = './login.html'
				} else {
					alert(res.meta.msg)
				}
			}, 'json')
		})
		// 更多接口说明请参见：http://docs.geetest.com/install/client/web-front/
		window.gt = captchaObj;
	};


	// 默认即可验证码需要的别管。
	$.ajax({
		url: "https://www.geetest.com/demo/gt/register-slide?t=" + (new Date()).getTime(), // 加随机数防止缓存
		type: "get",
		dataType: "json",
		success: function (data) {

			$('#text').hide();
			$('#wait').show();
			// 调用 initGeetest 进行初始化
			// 参数1：配置参数
			// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
			initGeetest({
				// 以下 4 个配置参数为必须，不能缺少
				gt: data.gt,
				challenge: data.challenge,
				offline: !data.success, // 表示用户后台检测极验服务器是否宕机
				new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

				product: "popup", // 产品形式，包括：float，popup
				width: "300px",
				https: true

				// 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
			}, handler);
		}
	});
</script>